<template>
    <div class="nav-bottom">
      <router-link class="nav-item"  to="/index/movie">
        <div class="nav-item-icon dy"></div>
        <div class="nav-item-text">电影</div>
      </router-link>
      <router-link class="nav-item"  to="/index/cinema">
        <div class="nav-item-icon yy"></div>
        <div class="nav-item-text">影院</div>
      </router-link>
      <router-link class="nav-item"  to="/index/discounts">
        <div class="nav-item-icon fx"></div>
        <div class="nav-item-text">特惠</div>
      </router-link>
      <router-link class="nav-item"  to="/index/user">
        <div class="nav-item-icon we"></div>
        <div class="nav-item-text">我的</div>
      </router-link>
    </div>
</template>

<script>
    export default {
        name: "nav-bottom",
    }
</script>

<style scoped lang="stylus">
  @import "../../common/icon/style.css"
  .nav-bottom
    width 100%
    height 49px
    background #1D1E1F
    display flex
    .nav-item
      display block
      flex 1
      .nav-item-icon
        height 25px
        width 25px
        margin 4px auto
        &.dy
          background url("icon_dy.svg")no-repeat center /100%
        &.yy
          background url("icon_yy.svg")no-repeat center /100%
        &.fx
          background url("icon_fx.svg")no-repeat center /100%
        &.we
          background url("icon_we.svg")no-repeat center /100%
      .nav-item-text
        font-size 10px
        height 16px
        color #5A6271
        line-height 16px
        user-select none
      &:active
        background #2e2f31
        .nav-item-text
          color #F6BD16
        .nav-item-icon
          &.dy
            background url("icon_dy_active.svg")no-repeat center /100%
          &.yy
            background url("icon_yy_active.svg")no-repeat center /100%
          &.fx
            background url("icon_fx_active.svg")no-repeat center /100%
          &.we
            background url("icon_we_active.svg")no-repeat center /100%
      &.active
        .nav-item-text
          color #F6BD16
        .nav-item-icon
          &.dy
            background url("icon_dy_active.svg")no-repeat center /100%
          &.yy
            background url("icon_yy_active.svg")no-repeat center /100%
          &.fx
            background url("icon_fx_active.svg")no-repeat center /100%
          &.we
            background url("icon_we_active.svg")no-repeat center /100%


</style>
